<template>
  <!-- 列表组件 -->
  <div class="saidAll">
    <div class="searchbox">
      <el-input
        v-model.trim="keySearch"
        clearable
        placeholder="请输入设备名称"
        @input="querySearchAsync"
      >
        <i slot="suffix" class="el-input__icon el-icon-search" @click="querySearchAsync(keySearch)"></i>
      </el-input>
    </div>
    <div class="equip-box">
      <div
        v-for="(item, index) in dataListResults"
        :key="index"
        class="equip-box-one"
        :class="nowIndex === index ? 'equip-box-one-active' : ''"
        :title="item.equipmentName"
        @click="selectionChange(item, index)"
      >{{ item.equipmentName }}</div>
    </div>
  </div>
</template>
<script>
import productionLineApi from "@/api/processing-management/basic-info-manage/production-line-manage/index";

export default {
  data() {
    return {
      dataList: [],
      nowIndex: "",
      keySearch: "",
      dataListResults: []
    };
  },
  created() {
    // this.queryList();
  },
  mounted() {},
  methods: {
    selectionChange(e, index) {
      this.nowIndex = index;
      this.$emit("selectionChange", e);
    },
    querySearchAsync(queryString = '') {
      var restaurants = this.dataList;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString, 'equipmentName')) : restaurants;
      // return results;
      this.dataListResults = results;
    },
    createStateFilter(queryString, value = 'value') {
      return (state) => {
        return (state[value].toLowerCase().includes(queryString.toLowerCase()) === true);
      };
    },
    // 获取设备数据
    queryList(e = {}) {
      // let params = {
      //   page: 1,
      //   size: 1000,
      //   entity: {
      //     operationMode: true
      //   }
      // };
      // if (this.keySearch.length > 0) {
      //   params.entity.equipmentName = this.keySearch;
      // }
      // if (!e.productLineNo) {
      //   this.dataList = [];
      //   // this.$mess
      //   this.$message.warning('请重新选择产线！')
      //   return;
      // }
      productionLineApi.queryByProductLineNo({ productLineNo: e.productLineNo }).then(res => {
        if (res.code === 1) {
          let list = res.data || {};
          this.dataList = list || [];
          // this.dataList = []
          // for (var i in data) {
          //   this.dataList.push({
          //     equipmentName: data[i],
          //     equipmentCode: i
          //   })
          // }
          this.querySearchAsync();
          if (this.dataList.length > 0) {
            this.selectionChange(this.dataList[0], 0);
          }
        }
      });
    }
  }
};
</script>
<style lang="scss"  scoped>
::v-deep {
  .el-input__inner {
    background: #00485A;
    border: 2px solid #2F8AA2;
  }
}
.saidAll {
  height: 100%;
  width: 100%;
  .searchbox {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .equip-box {
    width: 100%;
    height: 86%;
    padding-bottom: 10px;
    overflow-y: auto;
  }
}

.equip-box-one {
  width: 100%;
  padding: 0 10px;
  margin-bottom: 5px;
  color: #fff;
  font-size: 15px;
  height: 41px;
  line-height: 41px;
  border-radius: 21px;
  border: 1px solid #1093B6;
  text-align: center;
  cursor: pointer;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  &:hover {
    background: linear-gradient(0deg, #69EBCF, #19ABBD);
  }
}
.equip-box-one-active {
  // color: #000000;
  // font-weight: 700;
  // background-color: #fff;
  background: linear-gradient(0deg, #69EBCF, #19ABBD);
}
</style>
